﻿<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小米商城-个人中心</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">

		<style>
			.center{margin: 0 auto;}
			.next{
				height: 50px;
				width: 200px;
			}
			.btn_next{
				height: 50px;
				width: 300px;
			}
			.t_next{
				width: 200px;
				line-height: 20px;
				text-align: center;
				color: #fff;
				text-shadow:1px 1px 1px #333;
				border-radius: 5px;
				margin:0 20px 20px 0;
				position: relative;
				overflow: hidden;

				border:1px solid #333;
				box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
				background: -webkit-linear-gradient(top,#656565,#4c4c4c);
				background: -moz-linear-gradient(top,#656565,#4a4a4a);
				background: linear-gradient(top,#656565,#4a4a4a);
			}
			.btn_next ul li{
				line-height: 20px;
				text-align: center;
				color: #fff;
				text-shadow:1px 1px 1px #333;
				border-radius: 5px;
				margin:0 20px 20px 0;
				position: relative;
				overflow: hidden;

				border:1px solid #333;
				box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
				background: -webkit-linear-gradient(top,#656565,#4c4c4c);
				background: -moz-linear-gradient(top,#656565,#4a4a4a);
				background: linear-gradient(top,#656565,#4a4a4a);
			}

			.active a{
				color: #F0FFFF;
				background: -webkit-linear-gradient(top,#fece34,#d8a605);
				background: -moz-linear-gradient(top,#fece34,#d8a605);
				background: linear-gradient(top,#fece34,#d8a605);
			}
			.btn_next ul li{
				float: left;
			}
			.btn_t_b {
				width: 50px;
			}
			.ddspt img{
				width: 80px;
				height: 80px;
			}
			.btn_t{display: inline-block;}
		</style>
	</head>
	<body>
	<!-- start header -->
	<jsp:include page="include/top.jsp"></jsp:include>
	<!--end header -->
	<!-- start banner_x -->
	<jsp:include page="include/seacher.jsp"></jsp:include>
<!-- end banner_x -->
<!-- self_info -->
	<div class="grzxbj">
		<div class="selfinfo center">
		<div class="lfnav fl">
			<div class="ddzx">订单中心</div>
			<div class="subddzx">
				<ul>
					<li><a href="" >我的订单</a></li>

				</ul>
			</div>
			<div class="ddzx">个人中心</div>
			<div class="subddzx">
				<ul>
					<li><a href="person">我的个人中心</a></li>
					<li><a href="" style="color:#ff6700;font-weight:bold;">我的收藏</a></li>
				</ul>
			</div>
		</div>
		<div class="rtcont fr">
			<div class="ddzxbt">我的收藏</div>

			<c:forEach items="${pageInfo.list}" var="product">
			<div class="ddxq">
				<div class="ddspt fl"><img src="${path}/${product.id}.jpg" alt=""></div>
				<div class="ddbh fl">
					<a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
						${product.subTitle}
					<a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
					￥${product.price}
				</div>
				<div class="ztxx fr">
					<ul>
						<li>
							<a href="/showProduct?product_id=${product.id}">${product.name}</a>
						</li>
						<li>
							<a href="/quxiao?product_id=${product.id}">取消收藏</a>

						</li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="clear"></div>
			</div>

			</c:forEach>
			<div class="next center">
				<div class="t_next center">
					当前<span class="label ">${pageInfo.pageNum }</span>页
					|总<span class="label ">${pageInfo.pages }</span>页
					|总<span class="label ">${pageInfo.total }</span>件商品.
				</div>
			</div>

			<div class="btn_next center">
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<li class="btn_t_b"><a href="pageshoucang?pn=1">首页</a></li>
						<c:if test="${pageInfo.hasPreviousPage}">
							<li>
								<a href="pageshoucang?pn=${pageInfo.pageNum-1}" aria-label="Previous">
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
						</c:if>
						<c:forEach items="${pageInfo.navigatepageNums}" var="navigatepageNums">
							<c:if test="${navigatepageNums==pageInfo.pageNum }">
								<li class="active"><a>${navigatepageNums }</a></li>
							</c:if>
							<c:if test="${navigatepageNums!=pageInfo.pageNum }">
								<li><a href="pageshoucang?pn=${navigatepageNums}">${navigatepageNums }</a></li>
							</c:if>
						</c:forEach>
						<c:if test="${pageInfo.hasNextPage}">
							<li>
								<a href="pageshoucang?pn=${pageInfo.pageNum+1}" aria-label="Next">
									<span aria-hidden="true">&raquo;</span>
								</a>
							</li>
						</c:if>
						<li class="btn_t_b"><a href="pageshoucang?pn=${pageInfo.pages }">末页</a></li>
					</ul>
				</nav>
			</div>
		</div>

		</div>
		<div class="clear"></div>
		</div>
	</div>
<!-- self_info -->
		
		<footer class="mt20 center">			
			<div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
			<div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
		</footer>
	</body>
</html>